<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单事件-事件练习(Form Events - Event Practice)</title>
  <!-- 
  在JavaScript中，表单事件（Form Events）用于处理用户在表单中的交互操作，如输入、提交、重置等。这些事件可以帮助开发者实现表单验证、动态更新等功能。
  一、常见的表单事件
  1. submit 事件：当用户提交表单时触发。通常用于执行表单验证或处理提交数据。
    const form = document.getElementById('myForm');
    form.addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止默认提交行为
      console.log('表单已提交！');
    });
  2. reset 事件：当用户重置表单时触发。可以用于执行相关操作，例如确认用户是否要重置。
    form.addEventListener('reset', function() {
      console.log('表单已重置！');
    });
  3. focus 和 blur 事件：
    - focus 事件在元素获得焦点时触发，blur 事件在元素失去焦点时触发。常用于输入框的验证或提示信息。
    const inputField = document.getElementById('myInput');
    inputField.addEventListener('focus', function() {
      console.log('输入框获得焦点');
    });
    inputField.addEventListener('blur', function() {
      console.log('输入框失去焦点');
    });
  4. input 事件：当用户在输入框中输入内容时触发。适用于实时验证输入内容。
    inputField.addEventListener('input', function() {
      console.log('当前输入内容:', inputField.value);
    });
  5. change 事件：当用户改变输入元素的值时触发，通常用于下拉菜单或复选框。
    const selectField = document.getElementById('mySelect');
    selectField.addEventListener('change', function() {
        console.log('选择的值:', selectField.value);
    });

  二、表单事件的实践应用
  1. 表单验证：在提交表单之前，可以使用 submit 事件进行数据验证，确保用户输入符合要求。
    form.addEventListener('submit', function(event) {
      const email = document.getElementById('email').value;
      if (!validateEmail(email)) {
        alert('请输入有效的电子邮件地址！');
        event.preventDefault(); // 阻止表单提交
      }
    });

    function validateEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }
  2. 动态反馈： 使用 input 事件实时反馈用户输入，例如检查密码强度或确认密码是否匹配。
    const passwordField = document.getElementById('password');
    const confirmPasswordField = document.getElementById('confirmPassword');

    confirmPasswordField.addEventListener('input', function() {
      if (passwordField.value !== confirmPasswordField.value) {
        console.log('密码不匹配');
      } else {
        console.log('密码匹配');
      }
    });
  3. 用户体验提升：在用户重置表单时，可以使用 reset 事件提示用户确认操作，以防止意外重置。
    form.addEventListener('reset', function(event) {
      if (!confirm('您确定要重置表单吗？')) {
        event.preventDefault(); // 阻止重置
      }
    });
  三、总结
  表单事件在JavaScript中起着重要作用，能够增强用户与表单的交互体验。
  通过使用 submit、reset、focus、blur、input 和 change 等事件，开发者可以实现表单验证、动态反馈和用户体验提升等功能。
   -->
</head>
<body>

  <form action="submit.html" id="myForm">
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    <br>
    <button type="reset">重置</button>
    <button type="submit">提交</button>
  </form>

  <script>
    // 1. 提交表单时，验证电子邮件和密码字段是否为空，并在控制台输出相应的提示信息。
    const form = document.getElementById('myForm');
    form.addEventListener('submit', function(event) {
      const emailField = document.getElementById('email');
      const passwordField = document.getElementById('password');
      event.preventDefault(); // 阻止表单提交

      if (emailField.value === '') {
        console.log('电子邮件字段不能为空');
      }

      if (passwordField.value === '') {
        console.log('密码字段不能为空');
      }

      if (emailField.value !== '' && passwordField.value !== '') {
        console.log('表单已提交', emailField.value, passwordField.value);
      }
    });

    // 2. 重置表单时，清除电子邮件和密码字段的值，并在控制台输出相应的提示信息。
    form.addEventListener('reset', function(event) {
      console.log('表单已重置');
    });
  </script>
  
</body>
</html>